<template>
	<view class="content">
		<v-tabs
		  :value="status"
		  :scroll="false"
		  :tabs="nav"
		  :bold="false"
		   v-on:change="change"  
		></v-tabs>
		<!--雷达 -->
		<view v-if="status==0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_top">
					<image :src="item.img" mode="widthFix"></image>
					<view>
						<view class="name">{{item.name}} &#8226; <text class="text"> 线索</text></view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
				<view class="item_info">
					第{{item.num}}次<text>浏览</text>您的<text>{{item.articles}}</text>，请尽快把握商机
				</view>
				<!-- <view class="item_bottom">
					发消息
				</view> -->
			</view>
		</view>
		<!--线索 -->
		<view v-if="status==1">
			<view class="nhead">
				<view class="head_top">
					<image src="/static/images/t.png" mode="widthFix" class="head_img"></image>
				</view>
				<view class="head_bottom">
					<view class="name">云溪</view>
					<view class="name_info">轻舟小姐姐拓展的客户</view>
					<text class="name_btn">编辑资料</text>
				</view>
			</view>
			<view class="steps">
				<view class="title">线索互动</view>
				<view class="contact">
					<view class="days">
						<view class="day"><text class="day_text">04-23</text></view>
						<view class="day_time" v-for="(item,index) in step" :key="index">
							<view class="time"><text class="time_text">{{item.time}}</text></view>
							<view class="time_info">第{{item.num}}次<text>浏览</text>您的<text>{{item.articles}}</text>，请尽快把握商机</view>
						</view>
					</view>
					<view class="days">
						<view class="day"><text class="day_text">04-23</text></view>
						<view class="day_time" v-for="(item,index) in step" :key="index">
							<view class="time"><text class="time_text">{{item.time}}</text></view>
							<view class="time_info">第{{item.num}}次<text>浏览</text>您的<text>{{item.articles}}</text>，请尽快把握商机</view>
						</view>
					</view>
					
					<view class="days">
						<view class="day"><text class="day_text">04-23</text></view>
						<view class="day_time" v-for="(item,index) in step" :key="index">
							<view class="time"><text class="time_text">{{item.time}}</text></view>
							<view class="time_info">第{{item.num}}次<text>浏览</text>您的<text>{{item.articles}}</text>，请尽快把握商机</view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		
		<view v-if="status==2">
			<view class="thead">
				<view>共8条线索</view>
				<view>最新访问</view>
			</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item_top">
					<image :src="item.img" mode="widthFix"></image>
					<view>
						<view class="name">{{item.name}} &#8226; <text class="text"> 线索</text></view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
				<view class="item_info">
					访问次数：3
				</view>
				<view class="time">
					最后访问时间 2020-04-24 12:02:17
				</view>
			
			</view>
		</view>
	</view>
</template>

<script>
var t = getApp().globalData,
	e = t.requirejs('core'),
	i = t.requirejs('foxui'),
	a = t.requirejs('jquery');
	export default {
		data() {
			return {
				// 顶部菜单 默认雷达
				status: 0,
				nav:['雷达', '线索','线索'],
				// 列表数据
				list:[
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'2',
						articles:'阿里云总裁张建峰：未来3年再投2000亿加码新基建'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'1',
						articles:'余生，做好自己，不解释'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'1',
						articles:'余生，做好自己，不解释'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'1',
						articles:'余生，做好自己，不解释'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'1',
						articles:'余生，做好自己，不解释'
					},
					{
						img:'/static/images/t.png',
						name:'云溪',
						time:'2020-04-23 12:02:07',
						num:'1',
						articles:'余生，做好自己，不解释'
					}
				],
				step:[
					{
						time:'12:03',
						num:'2',
						articles:'阿里云总裁张建峰：未来3年再投2000亿加码新基建'
					},
					{
						time:'14:15',
						num:'1',
						articles:'余生，做好自己，不解释'
					}
				],
				//分页
				page:1,
				//下拉数据没有数据，暂停下拉操作
				stop:true,
			}
		},
		onShow() {
			//页面一打开数据请求
			this.init()
		},
		methods: {
			//菜单选择
			change(index){			
				this.status=index
				//this.list=[]
				this.page=1
				this.init()
			},
			//页面初始化
			init(type=''){
				let self=this
				let data={}
				//列表数据
				/*
				e.post('merchmanage.goods.getlist', data, function(t) {
					if(t.result.list.length<1){
						if(data.page==1)
							self.stop=true
						else
							self.stop=false
						return	
					}
					Object.keys(t.result.list).map((item)=>{
						t.result.list[item].checked=false
					})
					
					if(type=='add'){
						self.list.push(...t.result.list)
						console.log(self.list)
					}else{
						self.list=t.result.list
					}
					
				});
				*/
			},
		},
		//下拉加载
		onReachBottom(){
			console.log("->>>>>>")
			if(this.stop==false){
				return false
			}
			this.page+=1
			this.init('add')
		}
	}
</script>

<style>
	page{
		background: #f2f2f2;
		color: #454545;		
	}
	.content{
		font-size: 28rpx;
	}
	.item{
		margin: 30rpx;
		background: #fff;
		border-radius: 10rpx;
		
	}
	.item_top{
		padding: 30rpx 20rpx;
		display: flex;
	}
	.item_top image{
		width: 80rpx;
		margin-right: 20rpx;
	}
	.item_top .text{
		color: #b7b3b3;
		padding-left: 10rpx;
	}
	.time{
		color: #b7b3b3;
		font-size: 20rpx;
	}
	.item>.time{
		line-height: 38rpx;
		padding:10rpx 20rpx 30rpx;
	}
	.item_top .name{
		margin-bottom: 20rpx;
	}
	.item_info{
		padding:10rpx 20rpx 20rpx;
		line-height: 38rpx;
	}
	.item_info text,.time_info text{		
		color: #5cb85c;
	}
	.item_bottom{
		border-top: 1px solid #b7b3b3;
		line-height: 100rpx;
		text-align: right;
		color: #5cb85c;
		padding-right: 20rpx;
	}
	.thead{
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		background: #fff;
		padding: 20rpx;
		margin-top: 30rpx;
	}
	.nhead{
		background: #fff;
		margin-bottom: 20rpx;	
	}
	.head_top{
		height: 170rpx;
		background: linear-gradient(45deg,#5cb85c,#95ec95);
		position: relative;
	}
	.head_top .head_img{
		width: 150rpx;
		position: absolute;
		bottom: -75rpx;
		left: 50vw;
		margin-left: -75rpx;
		border: 5rpx solid #fff;
		border-radius: 50%;
	}
	.head_bottom{
		text-align: center;
		padding-bottom: 40rpx;
	}
	.head_bottom .name{
		margin-top: 100rpx;
	}
	.head_bottom .name_info{
		color: #b7b3b3;
		font-size: 24rpx;
		margin: 10rpx 0 20rpx;
	}
	.head_bottom .name_btn{
		padding: 10rpx 20rpx;
		background: #eee;
		color: #939393;
		border-radius: 30rpx;
	}
	.steps{
		padding: 20rpx;
		background: #fff;
	}
	.steps .title{
		color: #939393;
	}
	.steps .contact{
		padding: 20rpx 0 0 10rpx;
	}

	.days:first-child .day{
		border-left: 1px solid rgba(0,0,0,0);
	}
	.day{
		position: relative;
		padding-left: 30rpx;
		border-left: 1px solid #b0afaf;
	}
	.day::before{
		content: "";
		display: block;
		width: 15rpx;
		height: 15rpx;
		background: #5cb85c;
		border: 1px solid #5cb85c;
		position: absolute;
		left: -10rpx;
		top: 15rpx;
		border-radius: 50%;
		z-index: 10;
	}		
	.day_text{
		position: relative;
		top: 10rpx;
	}
	.day_time .time_text{
		position: relative;
		top: 10rpx;
	}
	.day_time .time{
		border-left: 1px solid #b0afaf;
		padding: 30rpx 0 0 30rpx;
		position: relative;
	}
	.day_time .time::before{
		content: "";
		display: block;
		width: 15rpx;
		height: 15rpx;
		background: #fff;
		border: 1px solid #5cb85c;
		position: absolute;
		left: -10rpx;
		top: 45rpx;
		border-radius: 50%;
	}
	.day_time .time_info{
		border-left: 1px solid #b0afaf;
		padding: 20rpx 0 0 30rpx;
	}
	.day_time:last-child .time_info{
		padding-bottom: 50rpx;
	}
	.days:last-child .day_time:last-child .time_info{
		border: 0;
	}
</style>
